<template>
  <div class="layout">
    <el-row>
      <el-col :span="5" class="left">
        <el-scrollbar class="left_content">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            text-color="rgb(182, 196, 213)"
            background-color="rgb(31, 45, 61)"
            active-text-color="rgb(59, 158, 255)"
          >
            <el-menu-item index="1" @click="dianji({ name: 'xiaoqu' })">
              <el-icon><i class="iconfont icon-xiaomao"></i></el-icon>
              <span>小区管理</span>
            </el-menu-item>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><i class="iconfont icon-zhenxuan"></i></el-icon>
                <span>胖虎甄选</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  index="2-1"
                  @click="dianji({ name: 'fatSelection_storeManagement' })"
                >
                  <el-icon><i class="iconfont icon-xiaomao"></i></el-icon>
                  商品管理</el-menu-item
                >
                <el-menu-item index="2-2">
                  <el-icon><i class="iconfont icon-xiaomao"></i></el-icon>
                  订单管理</el-menu-item
                >
                <el-menu-item index="2-3">
                  <el-icon><i class="iconfont icon-xiaomao"></i></el-icon>
                  售后订单</el-menu-item
                >
              </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item
              index="3"
              @click="dianji({ name: 'riderManagement' })"
            >
              <el-icon><i class="iconfont icon-zihangche3"></i></el-icon>
              <span>骑手管理</span>
            </el-menu-item>
            <el-menu-item index="1">
              <el-icon><i class="iconfont icon-zihangche3"></i></el-icon>
              <span>=======以上为参考模块=======</span>
            </el-menu-item>
            <el-menu-item
              index="4"
              @click="dianji({ name: 'riderManagement' })"
            >
              <el-icon><i class="iconfont icon-zihangche3"></i></el-icon>
              <span>首页管理</span>
            </el-menu-item>
            <el-menu-item
              index="5"
              @click="dianji({ name: 'riderManagement' })"
            >
              <el-icon><i class="iconfont icon-zihangche3"></i></el-icon>
              <span>课程管理</span>
            </el-menu-item>
            <el-menu-item
              index="6"
              @click="dianji({ name: 'riderManagement' })"
            >
              <el-icon><i class="iconfont icon-zihangche3"></i></el-icon>
              <span>咨询管理</span>
            </el-menu-item>
            <el-menu-item
              index="7"
              @click="dianji({ name: 'riderManagement' })"
            >
              <el-icon><i class="iconfont icon-zihangche3"></i></el-icon>
              <span>用户管理</span>
            </el-menu-item>
            <el-menu-item
              index="8"
              @click="dianji({ name: 'riderManagement' })"
            >
              <el-icon><i class="iconfont icon-zihangche3"></i></el-icon>
              <span>心理答疑管理</span>
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </el-col>
      <el-col :span="19" class="right">
        <el-row>
          <el-col :span="24">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>小区管理</el-breadcrumb-item>
              <el-breadcrumb-item>添加</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
          <el-col :span="24" class="content">
            <router-view></router-view>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
let router = useRouter();
const dianji = function (route) {
  router.replace(route);
  console.log("路由跳转");
};
</script>

<style lang="less" scoped>
.layout {
  .left {
    .left_content {
      position: fixed;
      width: 20.83%;
      left: 0;
      top: 0;
      bottom: 0;
      background-color: rgb(48, 65, 86);
      .el-menu-vertical-demo {
        background-color: rgba(0, 0, 0, 0);
      }
    }
  }
  .right {
    padding: 0 20px;
    .content {
      text-align: left;
    }
  }
}
</style>